import React, { Component } from 'react';

import memoize from 'memoize-one'

class FiliteredList extends Component {
  state = {
    filterText: ''
  }

  handleChange = (e) => {
    this.setState({
      filterText: e.target.value
    })
  }

  filter = memoize((list, filterText) => {
    return list.filter(item => item.text.includes(filterText))
  })

  render() {
    const filteredList = this.filter(this.props.list, this.state.filterText)
    return (
      <div>
        <input 
          type="text" 
          value={this.state.filterText}
          onChange={this.handleChange}
        />
        <ul>
          {
            filteredList.map(item => {
              return <li key={item.id}>{item.text}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default FiliteredList;